import { useMemo, useState } from 'react';
import { Button, Col, Row, Space, Table } from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import AddMemberDialog from './dialogs/AddMemberDialog';
import EditMemberDialog from './dialogs/EditMemberDialog';
import styles from '../../../../styles/doAppraisalDialog.module.scss';

const cx = classNames.bind(styles);
const { Column } = Table;

interface IGroupPaneProps {
  list: any[];
  setList?: any;
}

function GroupPane(props: IGroupPaneProps) {
  const { list } = props;

  const [addMemberVisible, setAddMemberVisible] = useState(false);
  const [editMemberVisible, setEditMemberVisible] = useState(false);

  return (
    <div className={cs(cx('appraisal-pane'), cx('group-pane'))}>
      <Row className={cs(cx('appraisal-operates'), cx('group-operates'))} justify="space-between">
        <Col>
          <h6>鉴定小组成员列表</h6>
        </Col>
        <Col>
          <Space>
            <Button>批量删除</Button>
            <Button type="primary">添加小组成员</Button>
          </Space>
        </Col>
      </Row>
      <Table dataSource={list} rowKey="id" size="small" bordered>
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="姓名" dataIndex="name" key="name" align="center" />
        <Column title="联系方式" dataIndex="mobile" key="mobile" align="center" />
        <Column title="备注" dataIndex="remark" key="remark" align="center" />
        <Column
          title="操作"
          key="action"
          align="center"
          render={(_text, _record: any) => (
            <Space>
              <Button type="link">编辑</Button>
              <Button type="link" danger>
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <AddMemberDialog
            visible={addMemberVisible}
            onClose={() => {
              setAddMemberVisible(false);
            }}
          />
        ),
        [addMemberVisible]
      )}
      {useMemo(
        () => (
          <EditMemberDialog
            visible={editMemberVisible}
            data={{}}
            onClose={() => {
              setEditMemberVisible(false);
            }}
          />
        ),
        [editMemberVisible]
      )}
    </div>
  );
}

export default GroupPane;
